<template>
  <div>

      <font size='50px'>课程</font>
      <table border="1" style='width:100%'>
          <tr>
              <td>课程id</td>
              <td>课程题目</td>
              <td>课程视频</td>
          </tr>
          <tr v-for="(item,index) in data" :key=index>
            <td>{{item.id}}</td>
            <td><a :href="'http://localhost:8080/coursedetail?id='+item.id">{{item.title}}</a></td>
            <td>
                <van-cell-group align='center'>
                    <video width='300' height='240' :src="'http://localhost:8000/static/upload/'+item.video" controls='controls' autoplay='autoplay'></video>
                </van-cell-group>
            </td>
          </tr>
      </table>
      
      

      <!-- 分页 -->
      <van-pagination @change='get_data' v-model="page" :total-items="total" :items-per-page="size" />
      
      <input type='text' v-model="a_page">
      <button @click="page=a_page,get_data()">跳转</button>
      

  </div>
</template>

<script>
import mycate from './mycate'
export default {
    data(){
        return{
            data:{},
            page:1,
            a_page:null,
            size:1,
            total:0,
            
        }
    },
    mounted(){
        // 获取数据
        this.get_data()
    },
    methods:{
        get_data(){
            this.axios.get('http://localhost:8000/courselist/',{params:{page:this.page}}).then((res)=>{
                console.log(res)

                this.data=res.data.data
                this.total=res.data.total
            })
        }
    }
}
</script>

<style>

</style>